<template>
    <view style="background-color: #f6f7fb;">
        <uni-nav-bar left-icon="left" :statusBar="true" titleSize="30px" leftText="返回" rightText="新建" title="跟进记录"
            @clickRight="addFn" @clickLeft="back" :fixed="true" backgroundColor="#3286ed" color="#fff" />
        <view style="position: fixed;z-index: 100;width:100%;">
            <uni-row class="demo-uni-row">
                <uni-col :span="15">
                    <view class="title">当前数据共{{total}}条</view>
                </uni-col>
                <uni-col :span="3">
                    <view class="title" style="color:#c3c3c3">|</view>
                </uni-col>
                <uni-col :span="6">
                    <view class="title" style="padding-right: 30px;" @click="isShow=true">筛选</view>
                </uni-col>
            </uni-row>
        </view>

        <!-- 跟进的数据列表-->
        <view style="width:100%;height:32px;display:block;margin-bottom:10px;"></view>
        <view>
            <u-swipe-action :autoClose="true">
                <view v-for="(item,index) in list" :key="item.id">
                    <u-swipe-action-item :options="options1" @click="delFn(item.id)" :disabled="disabledShow">
                        <view class="list" @click="detailsBtn(item.id)">
                            <view>客户名称：{{item.customerName}}</view>
                            <view>跟进方式：{{item.followMethod}}</view>
                            <view>跟进时间：{{item.followTime}}</view>
                            <view>跟进人名称：{{item.followUserName}}</view>
                        </view>
                    </u-swipe-action-item>
                </view>
            </u-swipe-action>
        </view>

        <u-toast ref="uToast"></u-toast>
        <u-loading-icon class="loading" v-if="loading==true" :show="true" duration="2000" mode="semicircle" size="40">
        </u-loading-icon>

        <view v-if="list.length ==0 && loading==false" class="BGC"></view>

        <!-- 右侧筛选的弹出层-->
        <u-popup class="pop" :show="isShow" :round="10" mode="right" @close="close" customStyle="margin-top:44px; min-width:300px;"
            overlayStyle="margin-top:44px">
            <u-cell-group>
                <u-cell>
                    <template #icon>
                        <view style="font-weight: 900;color:#ff7c35;">|</view>
                    </template>
                    <template #title>
                        <view style="font-size: 16px;font-weight: 600;color:#ff7c35;">筛选</view>
                    </template>
                </u-cell>
                <u-cell  >
                    <template #title>
                        <view class="">客户名称</view>
                    </template>
                </u-cell>
				<view class="input">
					 <u--input placeholder="请输入客户名称" border="surround" v-model="formData.customerName"  ></u--input>
				</view>
				
                <u-cell isLink @click="followWay=true">
                    <template #title>
                        <view class="">跟进方式</view>
                    </template>
                </u-cell>
				<view class="input">
					 <u--input placeholder="跟进方式" border="surround" v-model="formData.followMethodName"  ></u--input>
				</view>
                <u-cell isLink @click="dateShow=true">
                    <template #title>
                        <view class="">跟进时间</view>
                    </template>
                </u-cell>
				<view class="input">
					 <u--input placeholder="跟进时间" border="surround" v-model="formData.followTime"  ></u--input>
				</view>
            </u-cell-group>
			<view class="button" >
				<view class="anniu" @click="reset">重置</view>
				<view class="anniu" @click="searchClick" style="background-color: #ff7c35;">搜索</view>
				<!-- <u-button @click="reset" color="#c3c3c3" size="large" text="重置"></u-button> -->
				<!-- <u-button type="warning" @click="searchClick" size="large" text="确认"></u-button> -->
			</view>

            <!-- 跟进方式-->
            <view>
                <u-picker @confirm="followConfirm" @cancel="followWay=false" :closeOnClickOverlay="true"
                    @close="followWay=false" :show="followWay" :columns="followMethodOptions" keyName="dictLabel"></u-picker>
            </view>
			<!-- 时间选择 -->
			<u-datetime-picker @close="dateShow=false"  @cancel="dateShow=false" :closeOnClickOverlay="true" @confirm="dateConfirm"  :show="dateShow"  mode="date" ></u-datetime-picker>
        </u-popup>
    </view>
</template>

<script>
    import {
        listFollow,
        delFollow
    } from '@/api/follow.js'
    import {
        getDicts
    } from '@/api/dictionary/index.js'
    export default {
        data() {
            return {
                isShow: false, //控制筛选层
                followWay: false, //控制顾客选择器的显示
                formData: {
                    pageNum: 1,
                    pageSize: 10,
                    customerName: '', //客户名称
					followMethod:'',//跟进的方式
					followMethodName:'',
					followTime:'',//跟进时间
                },
				nowTime:'',//当前时间
                list: [],
                total: 0,
                loading: false,
                options1: [{
                    text: '删除'
                }],
                disabledShow: true,
				dateShow:false,//控制时间
                permissions: [],
                followMethodOptions: [],
                followMethod: '',
            }
        },
        onLoad() {
            this.loading = true
            this.permissions = this.$store.getters.permissions
            // 控制删除按钮权限出现
            if (this.permissions.includes('*:*:*') || this.permissions.includes('module:follow:delete')) {
                this.disabledShow = false
            }
            this.initData()
            this.getFollowMethod()
        },

        onReachBottom() {
            // 上划加载
            if (this.list.length == this.total) {
                this.formData.pageNum = 1
                return false
            }
            this.formData.pageNum++
            listFollow(this.formData).then(response => {
                this.list.push(...response.rows)
            })

        },

        onPullDownRefresh() {
            // 下拉加载
            this.loading = true
            this.formData = {
                    pageSize: 10,
                    pageNum: 1,
                },
                this.list = []
            setTimeout(() => {
                this.initData()
                uni.stopPullDownRefresh()
            }, 1000)
        },

        methods: {
            
            // 跟进方式
            followConfirm(e) {
				console.log(e);
				this.formData.followMethod=e.value[0].dictValue
                this.formData.followMethodName=e.value[0].dictLabel
                this.followWay=false
			},
			dateConfirm(e){
				this.formData.followTime=this.getTime(e.value)
			    this.dateShow=false
			},
			getTime(val) {
			    var date = new Date(val);
			    var year = date.getFullYear(); //年 ,从 Date 对象以四位数字返回年份
			    var month = date.getMonth() + 1; //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
			    var day = date.getDate(); //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
			    //修改月份格式
			    if (month >= 1 && month <= 9) {
			        month = "0" + month;
			    }
			    //修改日期格式
			    if (day >= 0 && day <= 9) {
			        day = "0" + day;
			    }
			    var currentFormatDate = `${year}-${month}-${day}`;
			    return currentFormatDate
			},
			

            //关闭筛选弹出层
            close() {
                console.log('关闭了筛选框');
                this.isShow = false
            },
            //筛选重置
            reset() {
				this.formData={
					pageNum: 1,
					pageSize: 10,
					customerName: '', //客户名称
					followMethod:'',//跟进的方式
					followMethodName:'',
					followTime:'',//跟进时间
				}
				this.isShow=false
            },
            //确认筛选
            searchClick() {
				this.list=[]
               this.initData()
			   this.formData={
			   	pageNum: 1,
			   	pageSize: 10,
			   	customerName: '', //客户名称
			   	followMethod:'',//跟进的方式
			   	followMethodName:'',
			   	followTime:'',//跟进时间
			   }
			   this.isShow=false
            },

            async initData() {
                const res = await listFollow(this.formData)
                console.log(res);
                this.total = res.total
                this.list = res.rows
                if (this.list.length || this.list.length == 0) {
                    setTimeout(() => {
                        this.loading = false
                    }, 1000)
                }
                console.log(this.list);
                res.rows.forEach(item => {
                    item.followMethod = this.getValue(this.followMethodOptions, item.followMethod)
                })
            },
            //新增
            addFn() {
                if (this.permissions.includes('*:*:*') || this.permissions.includes('module:follow:add')) {
                    uni.navigateTo({
                        url: '/pages/follow/addFollow/index'
                    })
                } else {
                    this.$refs.uToast.show({
                        type: 'error',
                        message: '您没有权限新增！'
                    })
                }

            },
            getFollowMethod() {
                getDicts('biz_followmethod').then(res => {
                    console.log(res);
                    this.followMethodOptions.push(res.data)
                })
            },
            getValue(arr, item) {
                console.log(arr, item);
                for (var i = 0; i < arr.length; i++) {
                    if (item == arr[i].dictValue) {
                        console.log(arr[i].dictLabel);
                        return arr[i].dictLabel
                    }
                }
            },
            back() {
                uni.switchTab({
                    url: '/pages/index'
                })
            },
          

            // 删除
            async delFn(id) {
                console.log(id);
                const res = await delFollow(id)
                if (res.code == 200) {
                    this.$refs.uToast.show({
                        type: 'success',
                        message: '删除成功！'
                    })
                }
                this.initData()
            },
            // 详情
            detailsBtn(id) {
                console.log(id);
            }
        }
    }
</script>

<style lang="scss">
    .demo-uni-row {
        margin-bottom: 10px;
        // position: fixed;
        /* QQ、字节小程序文档写有 :host，但实测不生效 */
        /* 百度小程序没有 :host，需要设置block */
        /* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
        display: block;
        /* #endif */

        .title {
            height: 38px;
            line-height: 38px;
            background-color: #ffffff;
            text-align: center;
            font-size: 13px;
        }
    }

    .BGC {
        width: 100%;
        min-height: 400px;
        background-image: url('@/static/images/bgc.png');
        background-size: 100% 200px;
        background-repeat: no-repeat;
        margin: 200px 0;
    }

    .list {
        padding: 10px;
    }

    .u-cell-text {
        color: #ff7c35;
        font-weight: bold;
    }
	.input{
		padding: 10px 20px;
	}
	.pop{
		position: relative;
		min-width: 200px;
		margin-top: 30px;
		padding-left: 5px;
		height: 100%;
		background-color: red;
		.button{
			width: 100%;
			position: absolute;
			bottom: 0;
			right: 0;
			display: flex;
			.anniu{
				display: inline-block;
				width: 100%;
				height: 40px;
				line-height: 40px;
				text-align: center;
				
			}
			
		}
	}
</style>
